<template>
  <div class="hello">
    <!-- <div id="univer" class="univer-container" />
    <el-button @click="save">保存</el-button> -->
    <div>
      <button @click="getData">Get Data</button>
    </div>
    <UniverSheet id="sheet" ref="univerRef" :data="av" />
  </div>
</template>
<script>
// import { FUniver } from '@univerjs/facade'
import UniverSheet from '@/components/Univer/UniverSheet.vue'
export default {
  components: {
    UniverSheet
  },
  data() {
    return {
      data: {},
      av: {
        'id': 't9vhzU',
        'sheets': {
          'sheet-01': {
            'name': 'Sheet1',
            'id': 'sheet-01',
            'rowCount': 6, // 行数
            'columnCount': 6, // 列数
            // 'defaultColumnWidth': 73,
            // 'defaultRowHeight': 119,
            'showGridlines': 1,
            'rightToLeft': 0,
            'zoomRatio': 2,
            // 'rowHeader': {
            //   'width': 0,
            //   'hidden': 0
            // },
            // 'columnHeader': {
            //   'height': 0,
            //   'hidden': 0
            // }
            // 单元格合并
            // 'mergeData': [
            //   {
            //     'startRow': 0,
            //     'startColumn': 0,
            //     'endRow': 1,
            //     'endColumn': 5,
            //     'rangeType': 0
            //   },
            //   {
            //     'startRow': 2,
            //     'startColumn': 0,
            //     'endRow': 2,
            //     'endColumn': 5,
            //     'rangeType': 0
            //   },
            //   {
            //     'startRow': 10,
            //     'startColumn': 0,
            //     'endRow': 10,
            //     'endColumn': 1,
            //     'rangeType': 0
            //   }
            // ]
            // 单元格数据
            // 'cellData': {
            //   '0': {
            //     '0': {
            //       'v': '日喀则市XX县YYYY年MM月旅游业带动农牧民转移就业统计表-景区（点）',
            //       't': 1
            //     },
            //     '1': {}
            //   },
            //   '1': {
            //     '2': {}
            //   },
            //   '2': {
            //     '0': {
            //       'v': '填报单位： 日喀则市  填报人：张三   填报时间：2024年2月2号',
            //       't': 1
            //     },
            //     '2': {}
            //   },
            //   '3': {
            //     '0': {
            //       'v': '序号',
            //       't': 1
            //     },
            //     '1': {
            //       'v': '景区（点）',
            //       't': 1
            //     },
            //     '2': {
            //       'v': '转移就业人数',
            //       't': 1
            //     },
            //     '3': {
            //       'v': '转移就业人次',
            //       't': 1
            //     },
            //     '4': {
            //       'v': '总收入',
            //       't': 1
            //     },
            //     '5': {
            //       'v': '备注',
            //       't': 1
            //     }
            //   },
            //   '4': {
            //     '0': {
            //       'v': 1,
            //       't': 2
            //     },
            //     '2': {
            //       'v': 2,
            //       't': 2
            //     }
            //   },
            //   '5': {
            //     '0': {
            //       'v': 2,
            //       't': 2
            //     },
            //     '2': {
            //       'v': 2,
            //       't': 2
            //     }
            //   },
            //   '6': {
            //     '0': {
            //       'v': 3,
            //       't': 2
            //     },
            //     '2': {
            //       'v': 2,
            //       't': 2
            //     }
            //   },
            //   '7': {
            //     '0': {
            //       'v': 4,
            //       't': 2
            //     },
            //     '2': {
            //       'v': 2,
            //       't': 2
            //     }
            //   },
            //   '8': {
            //     '0': {
            //       'v': 5,
            //       't': 2
            //     },
            //     '2': {
            //       'v': 2,
            //       't': 2
            //     }
            //   },
            //   '9': {
            //     '0': {
            //       'v': 6,
            //       't': 2
            //     },
            //     '2': {
            //       'f': '=SUM(C5:C9)',
            //       'v': 10,
            //       't': 2
            //     }
            //   },
            //   '10': {
            //     '0': {
            //       'v': '合计',
            //       't': 1
            //     }
            //   }
            // }
          }
        }
      }
    }
  },
  mounted() {
    // setTimeout(() => {
    //   var univer = new window.UniverCore.Univer({
    //     theme: window.UniverDesign.defaultTheme,
    //     locale: window.UniverCore.LocaleType.ZH_CN,
    //     logLevel: window.UniverCore.LogLevel.VERBOSE
    //   })

    //   // core plugins
    //   univer.registerPlugin(window.UniverDocs.UniverDocsPlugin, {
    //     hasScroll: false
    //   })
    //   univer.registerPlugin(window.UniverEngineRender.UniverRenderEnginePlugin)
    //   univer.registerPlugin(window.UniverUi.UniverUIPlugin, {
    //     container: 'univer',
    //     header: false,
    //     toolbar: false,
    //     footer: false
    //   })
    //   univer.registerPlugin(window.UniverSheets.UniverSheetsPlugin)
    //   univer.registerPlugin(window.UniverSheetsUi.UniverSheetsUIPlugin)

    //   // sheet feature plugins
    //   univer.registerPlugin(window.UniverSheetsNumfmt.UniverSheetsNumfmtPlugin)
    //   univer.registerPlugin(window.UniverEngineFormula.UniverFormulaEnginePlugin)
    //   univer.registerPlugin(window.UniverSheetsFormula.UniverSheetsFormulaPlugin)

    //   // create univer sheet instance

    //   this.data = univer.createUniverSheet(
    //     {
    //       'id': 't9vhzU',
    //       'sheetOrder': [
    //         'sheet-01'
    //       ],
    //       'name': '',
    //       'appVersion': '',
    //       'locale': 'zhCN',
    //       'styles': {},
    //       'sheets': {
    //         'sheet-01': {
    //           'type': 0,
    //           'name': 'Sheet1',
    //           'id': 'sheet-01',
    //           'tabColor': '',
    //           'hidden': 0,
    //           'rowCount': 11,
    //           'columnCount': 6,
    //           'zoomRatio': 1,
    //           'freeze': {
    //             'xSplit': 0,
    //             'ySplit': 0,
    //             'startRow': -1,
    //             'startColumn': -1
    //           },
    //           'scrollTop': 0,
    //           'scrollLeft': 0,
    //           'defaultColumnWidth': 103,
    //           'defaultRowHeight': 39,
    //           'mergeData': [
    //             {
    //               'startRow': 0,
    //               'startColumn': 1,
    //               'endRow': 0,
    //               'endColumn': 2,
    //               'rangeType': 0
    //             }
    //           ],
    //           'hideRow': [],
    //           'hideColumn': [],
    //           'cellData': {
    //             '0': {
    //               '1': {
    //                 'v': 123,
    //                 't': 2
    //               }
    //             },
    //             '1': {
    //               '2': {
    //                 'v': 456,
    //                 't': 2
    //               }
    //             }
    //           },
    //           'columnData': {},
    //           'status': 1,
    //           'showGridlines': 1,
    //           'rowHeader': {
    //             'width': 46,
    //             'hidden': 0
    //           },
    //           'columnHeader': {
    //             'height': 40,
    //             'hidden': 0
    //           },
    //           'selections': [
    //             'A1'
    //           ],
    //           'rightToLeft': 0,
    //           'pluginMeta': {}
    //         }
    //       },
    //       'resources': []
    //     }
    //   )
    // }, 100)
  },
  methods: {
    save() {
      const savedData = this.data.save()
      console.log(this.data, savedData, '-----------------savedData')
    },
    getData() {
      const result = this.$refs.univerRef?.getData()
      console.log(result, '------------------result')
    }
  }
}
</script>
<style scoped>
.univer-container {
  margin: 0px;
  padding: 0px;
  position: absolute;
  width: 800px;
  height: 400px;
  left: 0px;
  top: 40px;
  bottom: 0px;
}
</style>
